<template>
	<view class="submit-page">
		<!-- 头部导航 -->

		<!-- 照片确认区域 -->
		<view class="photo-section">
			<view class="photo-title">人脸照片</view>
			<view class="photo-container">
				<image :src="photoUrl" class="face-photo" mode="aspectFill"></image>
				<view class="photo-status">
					<text class="status-icon">✓</text>
					<text class="status-text">照片上传成功</text>
				</view>
			</view>
		</view>

		<!-- 个人资料表单 -->
		<view class="form-section">
			<view class="section-title">个人资料</view>

			<view class="form-item">
				<view class="item-label">真实姓名 *</view>
				<input
					class="item-input"
					v-model="formData.name"
					placeholder="请输入真实姓名"
					maxlength="20"
				/>
			</view>

			<view class="form-item">
				<view class="item-label">手机号 *</view>
				<view class="phone-input-container">
					<input
						class="item-input phone-input"
						v-model="formData.phone"
						placeholder="请输入手机号"
						type="number"
						maxlength="11"
						disabled
					/>
					<button 
						class="get-phone-btn" 
						open-type="getPhoneNumber" 
						@getphonenumber="getPhoneNumber"
					>
						获取手机号
					</button>
				</view>
			</view>

			<view class="form-item">
				<view class="item-label">个人介绍 *</view>
				<textarea
					class="item-textarea"
					v-model="formData.note"
					placeholder="请介绍一下自己，让大家更了解你"
					maxlength="300"
				></textarea>
				<view class="char-count">{{ formData.note.length }}/300</view>
			</view>
		</view>

		<!-- 协议同意 -->
		<view class="agreement-section">
			<view class="agreement-item" @tap="toggleAgreement">
				<view class="checkbox" :class="{ checked: agreedToTerms }">
					<text v-if="agreedToTerms" class="check-icon">✓</text>
				</view>
				<view class="agreement-text">
					我已阅读并同意《主理人服务协议》和《隐私政策》
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<button
				class="submit-btn"
				:class="{ disabled: !canSubmit }"
				:disabled="!canSubmit || submitting"
				@tap="submitApplication"
			>
				{{ submitting ? '提交中...' : '提交申请' }}
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { one } from '/common/data.js'
import { post } from '/common/api.js'

// 获取传递的照片URL
const photoUrl = ref('')

// 表单数据
const formData = ref({
	name: '',
	phone: '',
	note: ''
})

// 协议同意状态
const agreedToTerms = ref(false)
const submitting = ref(false)

// 计算是否可以提交
const canSubmit = computed(() => {
	return formData.value.name.trim() &&
		   formData.value.phone.trim() &&
		   formData.value.note.trim() &&
		   agreedToTerms.value
})

onMounted(() => {
	// 获取页面参数
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	if (currentPage.options.photoUrl) {
		photoUrl.value = decodeURIComponent(currentPage.options.photoUrl)
	}
})

// 切换协议同意状态
const toggleAgreement = () => {
	agreedToTerms.value = !agreedToTerms.value
}

// 验证手机号
const validatePhone = (phone) => {
	return /^1[3-9]\d{9}$/.test(phone)
}

// 获取微信手机号
const getPhoneNumber = async (e) => {
	console.log('获取手机号事件:', e)
	
	if (e.detail.errMsg === 'getPhoneNumber:ok') {
		// 用户同意授权
		const { code } = e.detail
		
		try {
			uni.showLoading({ title: '获取中...' })
			
			// 调用后端接口解密手机号
			const res = await post('/customer/phone', {
				code: code,
				config: "wxapp"
			})
			
			uni.hideLoading()
			
			if (res.code === 200 && res.data) {
				formData.value.phone = res.data
				uni.showToast({ 
					title: '手机号获取成功', 
					icon: 'success' 
				})
			} else {
				uni.showToast({
					title: res.msg || '获取手机号失败',
					icon: 'none'
				})
			}
		} catch (error) {
			uni.hideLoading()
			console.error('获取手机号失败:', error)
			uni.showToast({
				title: '获取手机号失败，请重试',
				icon: 'none'
			})
		}
	} else {
		// 用户拒绝授权
		uni.showToast({
			title: '需要授权才能获取手机号',
			icon: 'none'
		})
	}
}

// 提交申请
const submitApplication = async () => {
	if (!canSubmit.value || submitting.value) return

	// 详细验证
	if (!formData.value.name.trim()) {
		uni.showToast({ title: '请输入真实姓名', icon: 'none' })
		return
	}

	if (!formData.value.phone.trim()) {
		uni.showToast({ title: '请获取手机号', icon: 'none' })
		return
	}

	if (!validatePhone(formData.value.phone)) {
		uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
		return
	}

	if (!formData.value.note.trim()) {
		uni.showToast({ title: '请填写个人介绍', icon: 'none' })
		return
	}

	if (!agreedToTerms.value) {
		uni.showToast({ title: '请同意服务协议', icon: 'none' })
		return
	}

	submitting.value = true

	try {
		const res = await one('fn_curator_apply', {
			photoUrl: photoUrl.value,
			name: formData.value.name.trim(),
			phone: formData.value.phone.trim(),
			note: formData.value.note.trim()
		})

		if (res.code === 200) {
			uni.showModal({
				title: '申请提交成功',
				content: '您的主理人申请已提交，我们将在3-5个工作日内审核并回复',
				showCancel: false,
				success: () => {
					// 跳转到首页或我的页面
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			})
		} else {
			uni.showToast({
				title: res.msg || '提交失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('提交申请失败:', error)
		uni.showToast({
			title: '提交失败，请重试',
			icon: 'none'
		})
	} finally {
		submitting.value = false
	}
}
</script>

<style scoped>
.submit-page {
	min-height: 100vh;
	background: #f8f9fa;
}

.header {
	background: #fff;
	padding-top: env(safe-area-inset-top);
}

.nav-bar {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-bottom: 1rpx solid #e5e5e5;
}

.nav-back {
	position: absolute;
	left: 30rpx;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 40rpx;
	color: #333;
	font-weight: bold;
}

.nav-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.photo-section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.photo-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 20rpx;
}

.photo-container {
	display: flex;
	align-items: center;
	gap: 30rpx;
}

.face-photo {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 2rpx solid #e5e5e5;
}

.photo-status {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.status-icon {
	width: 40rpx;
	height: 40rpx;
	background: #4CAF50;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
}

.status-text {
	font-size: 28rpx;
	color: #4CAF50;
}

.form-section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 30rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.item-label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 12rpx;
	font-weight: 500;
}

.item-input {
	width: 100%;
	height: 80rpx;
	background: #f8f9fa;
	border: 1rpx solid #e5e5e5;
	border-radius: 12rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.item-input:focus {
	border-color: #AA0E99;
	background: #fff;
}

.phone-input-container {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.phone-input {
	flex: 1;
}

.get-phone-btn {
	padding: 10rpx 20rpx;
	background-color: #AA0E99;
	color: #fff;
	font-size: 24rpx;
	border-radius: 20rpx;
	border: none;
	line-height: 1.2;
	min-width: 120rpx;
	white-space: nowrap;
}

.item-textarea {
	width: 100%;
	min-height: 120rpx;
	background: #f8f9fa;
	border: 1rpx solid #e5e5e5;
	border-radius: 12rpx;
	padding: 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	line-height: 1.5;
}

.item-textarea:focus {
	border-color: #AA0E99;
	background: #fff;
}

.char-count {
	text-align: right;
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}

.agreement-section {
	margin: 20rpx;
}

.agreement-item {
	display: flex;
	align-items: flex-start;
	gap: 16rpx;
}

.checkbox {
	width: 36rpx;
	height: 36rpx;
	border: 2rpx solid #e5e5e5;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4rpx;
}

.checkbox.checked {
	background: #AA0E99;
	border-color: #AA0E99;
}

.check-icon {
	color: #fff;
	font-size: 20rpx;
}

.agreement-text {
	flex: 1;
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
}

.submit-section {
	padding: 30rpx 20rpx;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #AA0E99 0%, #8B0C7A 100%);
	color: #fff;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 500;
	box-shadow: 0 6rpx 20rpx rgba(170, 14, 153, 0.3);
	line-height: 88rpx;
}

.submit-btn.disabled {
	background: #ccc;
	box-shadow: none;
}
</style>
